import React, { use, useContext, useReducer, useState } from "react";
import axios from "axios";

// 1.定义上下文对象
const titleContext = React.createContext();

function First() {
  // const value= useContext(titleContext);
  return (
    <div>
      <h1>First-父亲-----</h1>
      <titleContext.Consumer>
        {
          (value)=>{
            return <>
            <p>{value.title}---------{value.name}</p>
            </>
          }
        }
        
      </titleContext.Consumer>
      <Second></Second>
    </div>
  );
}
function Second() {
  // 3.通过useContext，获取数据
  const value = useContext(titleContext);
  return (
    <div>
      <h1>
        Second-儿子-------{value.title}---{value.name}
      </h1>
    </div>
  );
}
function App() {
  return (
    <div>
      <h1>APP-祖先</h1>
      {/* 2.通过Provider组件，将数据传递给后代组件 */}
      <titleContext.Provider value={{ title: "传家宝", name: "大标题" }}>
        <First></First>
      </titleContext.Provider>
    </div>
  );
}

export default App;
